import { computed, ComputedRef, defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    // 状态管理
    const count = ref(0);
    const items = ref([
      { id: 1, name: "Item 1" },
      { id: 2, name: "Item 2" },
      { id: 3, name: "Item 3" },
    ]);

    // 计算属性
    const itemCount: ComputedRef<number> = computed(() => items.value.length);

    // 事件处理
    const incrementCount = () => {
      count.value++;
    };

    const addItem = () => {
      const newItem = {
        id: items.value.length + 1,
        name: `Item ${items.value.length + 1}`,
      };
      items.value.push(newItem);
    };

    const removeItem = (id: number) => {
      items.value = items.value.filter((item) => item.id !== id);
    };

    function CountRender() {
      return (
        <div class="count">
          <div class="count-title app-text glb-red">
            <span>当前计数: {count.value}</span>
          </div>
          <BaseButton onClick={incrementCount} type="primary">
            增加计数
          </BaseButton>
          <BaseButton onClick={addItem} type="success">
            添加项目
          </BaseButton>
        </div>
      );
    }

    function ProjectListRender() {
      return (
        <div class="project">
          <div class="project-title orange-title">
            <span>项目列表 ({itemCount.value})</span>
          </div>
          <ul class="project-list">
            {items.value.map((item) => (
              <li>
                {item.name}
                <BaseButton onClick={() => removeItem(item.id)} type="danger">
                  删除
                </BaseButton>
              </li>
            ))}
          </ul>
        </div>
      );
    }

    return () => (
      <div class="detail">
        <div class="detail-title">
          <span>这里是详情页</span>
        </div>
        {CountRender()}
        {ProjectListRender()}
      </div>
    );
  },
});
